<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row :gutter="10">
                        <div style="float:right;margin-bottom: 10px;">
                            <Input v-model="filter.content" @on-search="search" search enter-button="查询" placeholder="请输入反馈内容"
                                   style="width:250px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                        </div>
                        <div style="float:right;margin-bottom: 10px;">
                            <Input v-model="filter.phone" @on-search="search" search enter-button="查询" placeholder="请输入手机号"
                                   style="width:250px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                        </div>
                    </Row>
                    <Row class="margin-top-10 table_pattern">
                        <Table :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    import config from '@/config'
    import { feedBackList, changeFeedStatus} from '@/api/main'
    export default {
        data() {
            return {
                columns: [
                    {
                        key: 'phone',
                        title: '联系手机号',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.phone)
                        },
                    },
                    {
                        key: 'address',
                        title: '联系地址',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.address)
                        },
                    },
                    {
                        key: 'content',
                        title: '反馈内容',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.content)
                        },
                    },
                    {
                        key: 'img',
                        title: '反馈图片',
                        align: 'center',
                        render: (h, params) => {
                            return h(
                                'div',
                                {
                                    style: {
                                        backgroundImage: 'url(' + params.row.img + ')',
                                        width: '150px',
                                        height: '120px',
                                        objectFit:'cover',
                                        margin: '10px auto',
                                        position: 'relative',
                                        cursor: 'pointer',
                                        backgroundSize: 'cover',
                                    },
                                    on: {
                                        click: e => {
                                        },
                                    },
                                }
                            )
                        },
                    },
                    {
                        key: 'created_time',
                        title: '反馈时间',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.created_time)
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                              h(
                                  'Poptip',
                                  {
                                      props: {
                                          confirm: true,
                                          title: '您确定要删除该反馈信息吗?',
                                          transfer: true,
                                      },
                                      on: {
                                          'on-ok': () => {
                                              let obj = {}
                                              obj.id = params.row.id
                                              obj.status = -1
                                              changeFeedStatus(obj).then(res => {
                                                  if (res.code === 0) {
                                                      let _this = this
                                                      this.$Message.success('删除成功')
                                                      this.init()
                                                  } else {
                                                      this.$Message.success(res.text)
                                                  }
                                              })
                                          },
                                      },
                                  },
                                  [
                                      h(
                                          'Button',
                                          {
                                              style: {
                                                  border:0,
                                                  background:'transparent',
                                                  fontSize:'14px',
                                                  color:'#377EEF'
                                              },
                                              props: {
                                                  placement: 'top',
                                                  size: 'small',
                                              },
                                          },
                                          '删除',
                                      ),
                                  ],
                              )
                            ])
                        },
                    },
                ],
                pagenation: {},
                list: [],
                filter: {
                    page: 0,
                    content: '',
                    phone: '',
                },
            }
        },
        methods: {
            change: function(page) {
                this.filter.page = page-1
                this.init()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            init () {
                feedBackList(this.filter).then(res => {
                    if (res.code == 0) {
                        this.list = res.data
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    } else {
                        this.$Message.error(res.text)
                    }
                })
            }
        },
        mounted() {
            this.init()
        },
    }
</script>
